<template>
    <header>
        <h1 @click='changeTitle'>{{title}}</h1>
    </header>
</template>

<script>
export default {
  name: 'app-header',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  methods: {
    changeTitle: function () {
      // 发布事件
      this.$emit('titleChange', '发布事件')
    }
  },
  data () {
    return {
      // title: 'Vue.js Demo'
    }
  }
}
</script>

<style scoped>
header {
  background: lightgreen;
  padding: 10px;
}

h1 {
  color: #222;
  text-align: center;
}
</style>
